/*
 *@author: YangJie
 *@date: 2021-04-08 16:00:23
 *@version:
 *@description: 参数设置->公共配置->往来单位
 */
import React, { Component } from 'react';
import { Table, Button, Form, Card, Tabs } from 'antd';
import '@/assets/css/settings';
import * as Utils from '../../../utils_yyr/action';
import BasicForm from '../../../components_yyr/common/basicForm';
import BasicDrawer from '../../../components_yyr/common/basicDrawer';
import { FileDown, FileUpload } from '../../../components_yyr/commponent/File';
import Paging from '../../../components_yyr/commponent/Paging';
import BasicConfirm from '../../../components_yyr/common/basicConfirm';
import { euqApplicationName } from '../../../config';

const { TabPane } = Tabs;
//测试数据

class CurrentUnit extends Component {
	state = {
		loading: false, //加载中...
		dataSource: [], //数据源
		drawerVisible: false, //新增修改抽屉的显示与隐藏
		chooseData: {}, //用checkbox选择好的数据
		drawerTitle: '', //抽屉的标题
		total: 0, //总数据量
		formValues: {type:1},
		selectedData: [],
		selectedKeys: [],
		handleType:0
	};
	componentDidMount() {
		this.fetch({
			pageNum: 1,
			pageSize: 10,
			type:1
		});
		// this.getInfo();
	}
	//初始化加载数据
	fetch = data => {
		let str = ''
		for(var key in data){
			if(data[key]){
				str += `&${key}=${data[key]}`
			}
		}
		this.setState({ loading: true })
		this.get(euqApplicationName + '/parameter_setting_public/queryRentDepartmentByParam?'+str).then(res => {
			this.setState({
				loading: false,
				dataSource: res.data,
				total:res.total,
				formValues:data
			});
		})
	};

	//表单查询
	filterSubmit = values => {
		values.pageNum = this.state.formValues.pageNum;
		values.pageSize = this.state.formValues.pageSize;
		values.type = 1
		this.fetch(values);
	};

	handleConfirm = (value, api, chooseData) => {
		console.log(this.state.selectedData)
		let str = ''
		for(var item of this.state.selectedData){
			str += item.id + ','
		}
		this.get(`${euqApplicationName}/parameter_setting_public/deleteRentDepartment?ids=${str.slice(0, str.length - 1)}`).then(res => {
			this.success();
			this.fetch({ ...this.state.formValues });
			this.setState({selectedKeys:[]})
		});
	};

	//头部关键字查询部分
	formList = () => {
		const formList = [
			{ type: 'INPUT', label: '单位名称', field: 'deptName', col: 8 },
			{ type: 'INPUT', label: '单位编码', field: 'deptCode', col: 8 },
			{ type: 'INPUT', label: '联系人', field: 'user', col: 8 },
		];
		return formList;
	};
	//抽屉中信息列表
	drawerFormList = data => {
		//TODO后续看看是否修改type
		const drawerFormList = [
			{ type: 'INPUT', label: '单位编码', field: 'deptCode', initialValue: data.deptCode ,placeholder:'如不输入则自动编码'},
			{ type: 'INPUT', label: '单位名称', field: 'name', initialValue: data.name, required: true },
			{ type: 'INPUT', label: '默认联系人', field: 'user', initialValue: data.user },
			{ type: 'INPUT', label: 'QQ', field: 'qqNumber', initialValue: data.qqNumber },
			{ type: 'INPUT', label: ' 微信号', field: 'weChat', initialValue: data.weChat },
			{ type: 'INPUT', label: '电话', field: 'phone', initialValue: data.phone },
			{ type: 'INPUT', label: 'Email', field: 'email', initialValue: data.email },
			{ type: 'INPUT', label: '传真', field: 'fax', initialValue: data.fax },
			{ type: 'INPUT', label: '税务登记号', field: 'taxNumber	', initialValue: data.taxNumber	 },
			{ type: 'INPUT', label: '地址', field: 'address', initialValue: data.address },
			{ type: 'INPUT', label: '邮编', field: 'postCode', initialValue: data.postCode },
			{ type: 'INPUT', label: '开户行', field: 'bank ', initialValue: data.bank },
			{ type: 'INPUT', label: '银行账户', field: 'bankAccount', initialValue: data.bankAccount },
			{ type: 'INPUT', label: '网址', field: 'website', initialValue: data.website },
			{ type: 'TEXTAREA', label: '备注', field: 'remarks', initialValue: data.remarks }
		];
		return drawerFormList;
	};

	// 提交modal
	handleSubmit = data => {
		const { dataSource, chooseData } = this.state;
		// let key = chooseData.key;
		// let newDataSource = dataSource;
		// let index = newDataSource.findIndex(value => value.key == key);
		// if (key) {
		// 	console.log('******修改******');
		// 	for (let j of newDataSource) {
		// 		if (j.key == key) {
		// 			newDataSource[index] = { ...newDataSource[index], ...data };
		// 		}
		// 	}
		// } else {
		// 	console.log('******添加******');
		// 	data.id = this.state.dataSource.length + 1;
		// 	data.key = this.state.dataSource.length + 1;
		// 	newDataSource.push(data);
		// }
		// this.setState({
		// 	dataSource: newDataSource,
		// 	selectedKeys: [],
		// 	selectedData: []
		// });

		// this.onClose();

		// 暂时注释
		const id = this.state.chooseData && this.state.chooseData.id;
		if (id && this.state.handleType === 1) {
			data = Object.assign({}, data, { id: id });
			data.updateId = localStorage.getItem('userId');
		} else {
			data.createId = localStorage.getItem('userId');
		}
		data.type = 1
		this.post(euqApplicationName + '/parameter_setting_public/addRentDepartment', { data }).then(res => {
			this.success();
			this.fetch({ ...this.state.formValues });
			this.onClose();
			this.setState({selectedKeys:[]})
		});
	};

	// 打开modal，判断是修改还是新增 0新增 1修改
	handleModal = (type, data) => {
		const { selectedData } = this.state;
		if (type) {
			if (selectedData.length == 1) {
				this.setState({
					drawerTitle: '修改',
					drawerVisible: true,
					chooseData: selectedData[0],
					handleType:type
				});
			} else {
				Utils.openNotification('warning', '请只选择一条修改');
			}
		} else {
			this.setState({
				drawerTitle: '添加',
				drawerVisible: true,
				handleType:type
			});
		}
	};

	onClose = () => {
		this.setState({
			drawerVisible: false,
			chooseData: {}
		});
		this.modalRef.props.form.resetFields();
	};

	render() {
		const columns = [
			// {
			// 	title: '序号',
			// 	width: 100,
			// 	dataIndex: 'id',
			// 	//到时用分页来实现序号
			// 	// render: (index) => {
			// 	// 	return `${(index + 1)}`;
			// 	// }
			// },
			{
				title: '单位编码',
				width: 150,
				dataIndex: 'deptCode'
			},
			{
				title: '单位名称',
				width: 200,
				dataIndex: 'name'
			},
			{
				title: '默认联系人',
				width: 150,
				dataIndex: 'user'
			},
			{
				title: 'QQ',
				width: 150,
				dataIndex: 'qqNumber'
			},
			{
				title: '微信号',
				width: 150,
				dataIndex: 'weChat'
			},
			{
				title: '联系电话',
				width: 150,
				dataIndex: 'phone'
			},
			{
				title: '传真',
				width: 150,
				dataIndex: 'fax'
			},
			{
				title: '地址',
				width: 200,
				dataIndex: 'address'
			},
			{
				title: '邮编',
				width: 150,
				dataIndex: 'postCode'
			},
			{
				title: 'Email',
				width: 150,
				dataIndex: 'email'
			},
			{
				title: '备注',
				width: 200,
				dataIndex: 'remarks'
			}
		];

		const { chooseData, drawerVisible, drawerTitle, dataSource, loading, total, formValues, selectedKeys, selectedData } = this.state;

		const drawerProps = {
			onRef: ref => (this.modalRef = ref),
			visible: drawerVisible,
			width: 700,
			drawerFormList: this.drawerFormList(chooseData),
			submit: this.handleSubmit,
			onClose: this.onClose,
			title: drawerTitle
		};

		//checkbox部分
		const rowSelection = {
			selectedRowKeys: selectedKeys,
			onChange: (selectedRowKeys, selectedRows) => {
				this.setState({
					selectedData: selectedRows,
					selectedKeys: selectedRowKeys
				});
			},
			getCheckboxProps: record => ({
				disabled: record.name === 'Disabled User',
				name: record.name
			})
		};

		return (
			<div className="shadow-radius">
				<Card>
					<BasicForm formList={this.formList()} filterSubmit={this.filterSubmit} labelSpan={8} wrapperSpan={12} onRef={ref => (this.child = ref)} />
				</Card>

				<Tabs
					tabBarExtraContent={
						<div className="buttonList">
							<Button icon="plus" onClick={() => this.handleModal(0, {})} type="primary">
								{' '}
								添加
							</Button>
							{/* 修改数据 新增和修改中的数据都比显示的数据多几项 */}
							<Button icon="eye" onClick={() => this.handleModal(1, {})} type="primary">
								修改
							</Button>
							<BasicConfirm title="确认删除?" api={1} icon="delete" button={true} buttonName="删除" data={selectedData} handleConfirm={this.handleConfirm} />
							<FileDown fileName="往来单位清单" buttonName="导出" method="post" apiPath={euqApplicationName+"/parameter_setting_public/exportRentDepartmentListExcel"} data={{ids:selectedKeys,type:1}} />
							<FileUpload buttonName="导入" apiPath={euqApplicationName+"/parameter_setting_public/importRentDepartmentListExcel"} load={true} fetch={() => this.fetch({ ...formValues })} parameter={{type:1}}/>
						</div>
					}
				>
					<TabPane tab="往来单位" key="1">
						<Table columns={columns} rowSelection={rowSelection} rowKey={(record) => record.id} dataSource={dataSource} pagination={false} loading={loading} scroll={{ y: 350, x: 1300 }} />
						<Paging total={total} formValues={formValues} fetch={pager => this.fetch(pager)} />
					</TabPane>
				</Tabs>

				<BasicDrawer {...drawerProps} />
			</div>
		);
	}
}
export default Form.create()(CurrentUnit);
